<template>
	<view class="payment-container">
		<view class="company-info">
			<view class="section-title">公司账户信息</view>
			<view class="info-item">
				<text class="label">开户名称</text>
				<view class="value-box">
					<text class="value">{{bankConfig.account}}</text>
					<text class="copy-icon" @click="copyText(String(bankConfig.account))">复制</text>
				</view>
			</view>
			<view class="info-item">
				<text class="label">银行账号</text>
				<view class="value-box">
					<text class="value">{{bankConfig.accountNumber}}</text>
					<text class="copy-icon" @click="copyText(String(bankConfig.accountNumber))">复制</text>
				</view>
			</view>
			<view class="info-item">
				<text class="label">开户银行</text>
				<text class="value-box">{{bankConfig.bank}}</text>
			</view>
		</view>
		<view class="payment-form">
			<view class="form-item">
				<text class="label">付款金额</text>
				<input v-model="info.money" class="input" type="digit" placeholder="请输入付款金额"
					placeholder-class="placeholder" />
			</view>

			<view class="form-item">
				<text class="label">付款用途</text>
				<view class="select-box" @click="popupRef.open()">
					<text>{{info.purpose || '请选择'}} </text>
					<uni-icons type="bottom" size="14" class="select-icon" />
				</view>
			</view>

			<view class="form-item">
				<text class="label">用户 ID</text>
				<input v-model="info.userId" class="input" maxlength="11" type="number" placeholder="请输入用户ID"
					placeholder-class="placeholder" />
			</view>

			<view class="form-item">
				<text class="label">手机号码</text>
				<input v-model="info.phone" maxlength="50" class="input" type="number" placeholder="请输入手机号码"
					placeholder-class="placeholder" />
			</view>

			<view class="form-item">
				<text class="label">备注信息</text>
				<textarea maxlength="200" v-model="info.remark" class="textarea" placeholder="请输入备注信息"
					placeholder-class="placeholder" />
			</view>
		</view>
		<view class="upload-section">
			<view class="section-title">上传付款凭证</view>
			<upload v-model="info.picList" :sourceType="['album', 'camera']"
				uploadUrl="/api/mall/order-service-daily/uploadCoverPic">
			</upload>
			<view class="upload_tips">上传凭证，最多9张。</view>
		</view>
		<view @click="info.submit" class="xjs-btn-primary">提交付款信息</view>
		<uni-popup ref="popupRef" type="bottom" background-color="#fff">
			<view v-if="bankConfig.paymentType" class="pop">
				<view @click="info.popClick(item)" v-for="item in bankConfig.paymentType.split('|')" class="line">{{item}}</view>
				<view @click="popupRef.close()" class="xjs-btn-primary">取消</view>
			</view>
		</uni-popup>
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	const popupRef = ref()
	onLoad(() => {
		info.userId = userInfo.value.id + ''
		info.phone = userInfo.value.phone
		getBankConfig()
	})
	const bankConfig = ref<any>({})
	const getBankConfig = async () => {
		const res : any = await api({
			method: 'get',
			url: '/mall/content/backend-configs/xjsAccountNumber'
		})
		console.log(res)
		bankConfig.value = res.data
	}
	const copyText = (text : string) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			}
		});
	};
	let info = reactive({
		money: "",
		purpose: "",
		userId: "",
		phone: "",
		remark: "",
		picList: [],
		popClick: (item) => {
			console.log(item)
			info.purpose = item
			popupRef.value.close()
		},
		submit: async () => {
			let warning = ''
			if (Number(info.money) <= 0) {
				warning = '付款金额不能小于0'
			} else if (info.purpose.trim().length == 0) {
				warning = '付款用途不能为空'
			} else if (info.userId.trim().length == 0) {
				warning = '用户ID不能为空'
			} else if (info.phone.trim().length == 0) {
				warning = '手机号码不能为空'
			} else if (info.picList.length < 1) {
				warning = '请上传打款截图'
			}
			if (warning) {
				uni.showToast({
					icon: 'none',
					title: warning
				})
				return
			}
			let params = {
				amountMoney: info.money,
				type: info.purpose,
				userId: info.userId,
				phone: info.phone,
				imgUrls: info.picList.join(','),
				remark: info.remark
			}
			console.log(params)
			const res : any = await api({
				method: 'post',
				url: '/mall/user/user_payment_voucher_record',
				data: params
			})
			if (res.code == 0 && res.data) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '提交成功！',
					duration: 2000
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1800)
			} else {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: res.msg
				})
			}
		}
	})
</script>
<style lang="scss" scoped>
	.payment-container {
		padding: 30rpx;
		box-sizing: border-box;

		.company-info {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.info-item:last-child {
				margin-bottom: 0;
			}

			.info-item {
				margin-bottom: 24rpx;
				display: flex;
				align-items: flex-start;

				.label {
					width: 140rpx;
					font-size: 28rpx;
					color: #666666;
					flex-shrink: 0;
				}

				.value-box {
					flex: 1;
					display: flex;
					justify-content: space-between;

					.value {
						font-size: 28rx;
						color: #333333;
					}

					.copy-icon {
						flex-shrink: 0;
						font-size: 28rpx;
						padding-left: 12rpx;
						color: var(--color-primary);
					}
				}
			}
		}

		.payment-form {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.form-item:last-child {
				margin-bottom: 0;
			}

			.form-item {
				margin-bottom: 30rpx;

				.select-box {
					height: 88rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 24rpx;
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
				}

				.label {
					font-size: 28rpx;
					color: #666666;
				}

				.input {
					height: 88rpx;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #333333;
					margin-top: 16rpx;
				}

				.textarea {
					height: 160rpx;
					width: 100%;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 24rpx;
					font-size: 28rpx;
					color: #333333;
					margin-top: 16rpx;
				}
			}
		}

		.upload-section {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.upload_tips {
				margin-top: 24rpx;
				font-size: 26rpx;
				color: #5C5E5E;
			}
		}

		.pop {
			background-color: #fff;
			padding: 12rpx 32rpx;

			.line {
				text-align: center;
				font-size: 32rpx;
				padding: 32rpx 0;
				border-bottom: 1rpx solid var(--pages-bg-color);
			}

			.line:last-child {
				border-bottom: 0;
			}
		}
	}
</style>